<template>
  <div>
    <div class="main-height">
      <Table :columns="columns" :data="data">
        <template slot-scope="{ row }" slot="operation">
          <strong>
            <a @click="getShowDetail(row)">详细</a>
          </strong>
        </template>
      </Table>
    </div>
    <Modal v-model="modal" draggable title="消费详细" width="900px" footer-hide>
      <Table :columns="columns1" :data="data1"></Table>
      <!-- <div class="order-inr">
                订单金额:
                <strong>¥ {{ totalInfo.money }}</strong>
                优惠金额:
                <strong>¥ {{ totalInfo.refund_money }}</strong>
                实收金额:
                <strong>¥ {{ totalInfo.reality_money }}</strong>
            </div> -->
    </Modal>
  </div>
</template>
<script>
import { PatientConsumptionList, PatientConsumptionInfo } from "@api/patient";

export default {
  data() {
    return {
      modal: false,
      columns: [
        {
          title: "收费/退费时间",
          key: "clinic_time_str",
        },
        {
          title: "诊室",
          key: "consulting_room",
        },
        {
          title: "医生",
          key: "doctor_name",
        },
        {
          title: "就诊时间",
          key: "clinic_time_str",
        },
        // {
        //     title: '应收/退金额 ',
        //     key: 'money'
        // },
        // {
        //     title: '实收/退金额',
        //     key: 'reality_money'
        // },
        {
          title: "操作 ",
          slot: "operation",
        },
      ],
      data: [],
      columns1: [
        {
          title: "名称",
          key: "drug_name",
        },
        {
          title: "数量",
          key: "drug_num",
          width: 80,
        },
        {
          title: "单位",
          key: "drug_unit",
          width: 80,
        },
        {
          title: "类型",
          key: "drug_type",
          width: 118,
        },
        // {
        //     title: '单价 ',
        //     key: 'price'
        // },
        // {
        //     title: '金额 ',
        //     key: 'money'
        // },
        // {
        //     title: '折后金额',
        //     key: 'reality_money'
        // }
      ],
      data1: [],
      totalInfo: {},
    };
  },
  methods: {
    getData(id) {
      const params = {
        patient_card_id: id,
        page: 0,
        pageSie: 0,
      };
      PatientConsumptionList(params)
        .then((res) => {
          this.data = res.list;
        })
        .catch(() => {});
    },
    getShowDetail(row) {
      const params = {
        consumption_id: row.id,
      };
      PatientConsumptionInfo(params)
        .then((res) => {
          this.data1 = res.detail_list;
          this.totalInfo = {
            money: res.money,
            reality_money: res.reality_money,
            refund_money: res.refund_money,
          };
          this.modal = true;
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.order-inr {
  padding: 20px;
}
.order-inr strong {
  font-size: 16px;
  font-weight: bold;
  margin-right: 30px;
}
.main-height {
  height: 630px;
  max-height: 630px;
  overflow-y: auto;
}

*::-webkit-scrollbar {
  width: 10px;
  /*对垂直流动条有效*/
  height: 10px;
  /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
*::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
*::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #eee;
}

/*定义右下角汇合处的样式*/
*::-webkit-scrollbar-corner {
  background: khaki;
}
</style>
